<template>
  <div class="app-container">
    <!-- 朔源 -->
    <k-dialog
      :show-hide.sync="showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="溯源"
      class-name="creatRollRoom_dialog"
      :show-foot="false"
      :two-btn="false"
    >
      <div>
        <el-table
          :data="ShuoYuan"
          fit
          border
          height="500"
          highlight-current-row
          style="width: 100%;border-radius:8px;margin-top: 20px;"
          :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
        >
          <el-table-column width="80px" type="index" label="序号" align="center" />
          <el-table-column min-width="100px" label="交易价格(单位:分)" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.price * 100 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="cerUrl" min-width="160px" label="作品等级证书地址" align="center" show-overflow-tooltip />
          <el-table-column prop="holderName" min-width="120px" label="持有人姓名" align="center" show-overflow-tooltip />
          <el-table-column prop="transferTime" min-width="150px" label="流转时间" align="center" show-overflow-tooltip />
        </el-table>
        <pagination
          v-show="totalDialog.total > 0"
          :total="totalDialog.total"
          :page.sync="totalDialog.currentPage"
          :limit.sync="totalDialog.pageSize"
          @pagination="listData"
        />
      </div>
    </k-dialog>

  </div>
</template>

<script>
import { NftGetAssetsWanderRecord } from '@/api/shop/index'

export default {
  name: 'Forged',
  data() {
    return {
      showHide: false,
      ShuoYuan: [],
      totalDialog: {
        total: 10,
        currentPage: 1,
        pageSize: 10,
        qrCodeId: undefined
      },
      updateShopList: false
    }
  },
  methods: {
    listData(row) {
      if (row) this.totalDialog.qrCodeId = row.qrCodeId
      NftGetAssetsWanderRecord({ id: row.id }).then(res => {
        console.log(res)
        this.showHide = true
        this.ShuoYuan = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    padding: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 300px;
    box-sizing: border-box;
    img{
      width: 710px;
      height: 152px;
    }
  }
  .addZone-dialog{
  .form-modifys{
    padding: 10px 150px;
  }
}
</style>
